import React from "react";
import Title from "../components/Title";
import SDTable from "../dataManage/SDTable";
import { Button, Form, Modal, Input, Col, Row, Select, InputNumber, message } from "antd";
import useReducer from "src/hooks/useReducer";
import moment from "moment";
import api from "../../api";
//import './index.scss'
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

export default function YdxxsManage() {
  const formRef = React.useRef();
  const actionRef = React.useRef();
  const [form] = Form.useForm();
 const userId = localStorage.getItem("userId");
 
  const [sate, dispatch] = useReducer({
    visible: false, // 抽屉弹窗
    editId: "", // 编辑id
    title: "", // 抽屉标题
  });
  const { visible, editId, title } = sate;
  const columns = [
    {
      title: "用户名称",
      dataIndex: "userName",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: "路线名称",
      dataIndex: "name",
      width: 150,
      ellipsis: true,

    },
    {
      title: "站点名称",
      dataIndex: "stationName",
      width: 150,
      ellipsis: true,
      hideInSearch: true,

      render: (text, record) => {
        return record.stationName?.join("、");
      }
    },
   
  
    {
      title: "预定日期",
      dataIndex: "startTime",
      width: 150,
      hideInSearch: true,

      ellipsis: true,
    },
    {
      title: "预定状态",
      dataIndex: "xlzt",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
      render: (text, record) => {
        return  "已预定"
      }

    },
   
  ];

    //保存
    const save = () => {
      form.validateFields().then((values) => {
          const params = {
            ...values,
            
          }
          editId && (params.id = editId);
       
          // 如果是新增， 那么userCreate 就是设置当前时间 
          if (!editId) {
            params.userCreate = moment().format("YYYY-MM-DD HH:mm:ss");
          }
  
        //   const remote = editId ? DEFAULT_API.editUser : DEFAULT_API.addUser;
  
        //   remote(params).then((res) => {
        //     if (res.success) {
        //       dispatch({ visible: false });
        //       actionRef.current.reload();
        //       message.success("操作成功");
        //     }else {
        //       message.error(res.message || "操作失败");
        //     }
        //   }
        // );
      });
    }
  return (
    <div className="css">
      <div style={{ padding: "0 100px" }}>
        <Title title={"预定信息"}></Title>
        <SDTable
          formRef={formRef}
          actionRef={actionRef}
           requestApi={api.ydxxs}
          columns={columns}
          params={{userId}}
         
          options={false}
        //   search={false}
        ></SDTable>

<Modal
        visible={visible}
        title={`${title}用户`}
        width={900}
        onCancel={() => dispatch({ visible: false })}
        footer={[
          <Button key="back" onClick={() => dispatch({ visible: false })}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={save}>
            确定
          </Button>,
        ]}
      >
        <Form form={form}>
          <Form form={form} {...layout}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="userName"
                  label="用户名称"
                  rules={[
                    {
                      required: true,
                      message: "用户名称",
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="userPhone"
                  label="用户手机号码"
                  rules={[
                    {
                      required: true,
                      // validator: isPhone,
                    },
                  ]}
                >
                  <Input  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="userRoleId"
                  label="角色名称"
                  rules={[
                    {
                      required: true,
                      message: "角色名称",
                    },
                  ]}
                >
                  <Select
                    // options={roleOptions}
                    allowClear
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="userEmail"
                  label="用户邮箱"
                  rules={[
                    {
                      required: true,
                      // validator: isEmail,
                    },
                  ]}
                >
                  <Input allowClear />
                </Form.Item>
              </Col>
            </Row>
            <Col span={12}>
                <Form.Item
                  name="userPassword"
                  label="用户密码"
                  rules={[
                    {
                      required: true,
                      // validator: isPassword,
                    },
                  ]}
                >
                  <Input.Password allowClear />
                </Form.Item>
              </Col>
           
          </Form>
        </Form>
      </Modal>
      </div>
    </div>
  );
}
